<template>
  <el-dialog :visible.sync="visible"
             title="冲突数据详情"
             :close-on-click-modal="false"
             :append-to-body="true"
             :before-close="closeDialog"
             class="user-dialog add-or-updata"
             width="65%"
             :close-on-press-escape="false">
    <el-row v-if="type === 1"
            :gutter="15">
      <el-col :span="12">
        <span>同步的用户</span>
        <table-template :tableData='tableData'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists'>
        </table-template>
      </el-col>
      <el-col :span="12">
        <span>系统的用户</span>
        <table-template :tableData='tableData11'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists'>
        </table-template>
      </el-col>
    </el-row>
    <el-row v-if="type === 2"
            :gutter="15">
      <el-col :span="12">
        <span>同步的部门</span>
        <table-template :tableData='tableData1'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists'>
          <template slot="syncName-after">
            <el-table-column prop="syncSuperiorName"
                             label="上级部门"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.syncSuperiorName}}{{'('+scope.row.syncSuperiorCode + ')'}}</span>
              </template>
            </el-table-column>
          </template>
        </table-template>
      </el-col>
      <el-col :span="12">
        <span>系统的部门</span>
        <table-template :tableData='tableData111'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists'>
          <template slot="sysName-after">
            <el-table-column prop="sysSuperiorName"
                             label="上级部门"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.sysSuperiorName}}{{'('+scope.row.sysSuperiorCode + ')'}}</span>
              </template>
            </el-table-column>
          </template>
        </table-template>
      </el-col>
    </el-row>
    <el-row v-if="type === 3"
            :gutter="15">
      <el-col :span="12">
        <span>同步的职位</span>
        <table-template :tableData='tableData2'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists'>
        </table-template>
      </el-col>
      <el-col :span="12">
        <span>系统的职位</span>
        <table-template :tableData='tableData21'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists'>
        </table-template>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
export default {
  mixins: [mixinViewModule, formValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '',
        // getDataInfoURL: 'system/sysSyncConflictRecord/getDetailById?id=',
        addURL: '/system/sysDept', // 添加或修改的接口
        updateURL: '/system/sysDept' // 添加或修改的接口
      },
      visible: false,
      dataForm: {
        id: ''
      },
      type: '',
      dataLists: []
    }
  },
  components: {
    tableTemplate
  },
  computed: {
    tableData () { // 同步的用户
      return [
        { label: '工号', width: '100', prop: 'syncUsername' },
        { label: '姓名', width: '100', prop: 'syncRealName' },
        { label: '部门', width: '100', prop: 'syncDeptName' },
        { label: '职位', width: '100', prop: 'syncPositionName' }
      ]
    },
    tableData11 () { // 系统的用户
      return [
        { label: '工号', width: '100', prop: 'sysUsername' },
        { label: '姓名', width: '100', prop: 'sysRealName' },
        { label: '部门', width: '100', prop: 'sysDeptName' },
        { label: '职位', width: '100', prop: 'sysPositionName' }
      ]
    },
    tableData1 () { // 同步的部门
      return [
        { label: '编号', width: '80', prop: 'syncCode' },
        { label: '部门', width: '100', prop: 'syncName' }
      ]
    },
    tableData111 () {
      return [
        { label: '编号', width: '80', prop: 'sysCode' },
        { label: '部门', width: '100', prop: 'sysName' }
      ]
    },
    tableData2 () {
      return [
        { label: '编号', width: '100', prop: 'syncCode' },
        { label: '职位', width: '100', prop: 'syncName' }
      ]
    },
    tableData21 () {
      return [
        { label: '编号', width: '100', prop: 'sysCode' },
        { label: '职位', width: '100', prop: 'sysName' }
      ]
    }
  },
  methods: {
    closeDialog () {
      this.dataForm.id = ''
      this.dataLists = []
      this.visible = false
      this.$emit('callBack')
    },
    init (data, type) {
      this.visible = true
      if (data) {
        this.dataForm.id = data
      }
      if (type) {
        this.type = type
      }
      this.$nextTick(() => {
        this.getDataInfo({ url: `system/sysSyncConflictRecord/getDetailById`, paramData: { id: data, syncType: type } }).then(res => {
          if (res.code !== 0) {
            return
          }
          if (!res.data) {
            this.$message.warning('暂无冲突详情')
            return this.closeDialog()
          }
          this.dataLists = res.data
        })
      })
    }
  }
}
</script>

<style lang="scss">
</style>
